<template>
  <div class="general-layout">
  <NavigationBar></NavigationBar>
    <div class="head" style="display: flex; justify-content: center; align-items: center;">
      <!-- <span
        style="
          margin-left: 5%;
          font-size: 2em;
          font-weight: bold;
          color: black;
          width: 40%;
        "
        class="demonstration"
      >
        优秀学生示范
      </span> -->
      <StuSearchBar/>
    </div>

    <div>
      <StuShowInfor />
      <div style="width: 100%; height: 50px"></div>
    </div>

    <div>
      <Details />
    </div>
  </div>
</template>

<script setup>
import StuSearchBar from "./StuSearchBar.vue";
import StuShowInfor from "./StuShow copy.vue";
import Details from "./StuDetails copy.vue";
</script>

<!-- 添加上scoped，相当于作用域标识，只作用于当前vue -->
<style scoped>
.head {
  display: flex;
}
</style>
